<?php
include "./conf/.htconfig.php";
include "./getVideoSession.php";
$this_doc = $conf['base_url'] . "view_result.php";
  include "./conf/conn.php";
  $query = "SELECT * FROM " . $conf['db_video_table'] . " WHERE video = '" . $video . "' ORDER BY mark ASC";
  $result = mysql_query($query) or die(mysql_error());
  mysql_close($con);
  $marks = "[";
  $first = true;
  while ($rad = mysql_fetch_array($result)) {
    $color = null;
    if ($rad['color'] === "Red") {
      $color = "red";
    } else if ($rad['color'] === "Yellow") {
      $color = "yellow";
    } else if ($rad['color'] === "Green") {
      $color = "green";
    }
    $relY = $rad['mark'];
    $mark = "{relY:" . $relY . ",row:1" . $row . ",color:\"" . $color . "\",id:" . $rad['id'] . ",selected:\"no\",time:" . $rad['time'] . "}";
    if (!$first) {
      $marks = $marks . ", " . $mark;
    } else {
      $marks = $marks . $mark;
      $first = false;
    }
  }
  $marks = $marks . "]";

  $video_ogg = "video/" . $video . ".ogv";
  $video_webm = "video/" . $video . ".webm";


?>
<!DOCTYPE html>
<html>
  <head>
    <title>VAT: view results</title>
    <meta charset="UTF-8">
    <meta name="description" content="A video annotations tool written in HTML5 and PHP" />
    <meta http-equiv="content-language" content="sv" />
    <meta name="name" content="VAT 0.1 a program for video annotation" />
    <meta name="keywords" content="VAT,video annotation tool" />
    <meta name="author" content="Simon Wikander" />
    <link rel="stylesheet" type="text/css" href="<?= $conf['base_url'] ?>style/style.css" media="screen" />
    <script type="text/javascript" src="<?= $conf['jquerysrc'] ?>"></script>
    <script type="text/javascript" src="<?= $conf['base_url'] ?>js/timeline.js"></script>
    <script type="text/javascript">
      var marks = <?= $marks ?>;
      var rows = 1;
      function updateSlide() {
        redrawTimer(); //redraw timer position
      }

      $(document).ready(function(){
   
        $("#timer").on("contextmenu",function(event){
          
          var offset = $(this).offset();
          var x = event.pageX - offset.left;
          var y = event.pageY - offset.top;
          clickAction(x, y, 3, marks);
          event.preventDefault();
        }); 
        initTimeline(800, marks, 10);
        printMarks(marks, true);
        $("#play").hide();
        $("video#show").get(0).addEventListener('timeupdate', updateSlide, false);
        $("video#show").get(0).addEventListener('canplay', function() { $("#play").show(); }, false);

        $("#play").click(function() {
          var value = $(this).val();
          if (value === "paused") {
            $(this).val("playing");
            $(this).html("Pause");
            $("video#show").get(0).play();
          } else {
            $(this).val("paused");
            $(this).html("Play");
            $("video#show").get(0).pause();
          }
        });
   
        $('#timer').click(function (event) {
          if (event.which == 1) {
            var offset = $(this).offset();
            var x = event.pageX - offset.left;
            var y = event.pageY - offset.top;
            clickAction(x, y, 1, marks);
            event.preventDefault();
          }
        });
    
      });

    </script>
  </head>
  <body>
    <a href="<?= $conf['base_url'] ?>"><div class="back"></div></a>
    <div id="around">
    <div id="container">
      <h1 id="rubrik" style="margin-right: 3px; margin-left: 3px; width: 100%;"><?= $video_name ?></h1>  
      <video id="show" preload="auto" width="800">
        <?php
        if (file_exists("./" . $video_ogg)) {
          echo "<source src='{$conf['base_url']}" . $video_ogg . "'  type='video/ogg' />";
        }
        if (file_exists("./" . $video_webm)) {
          echo "<source src='{$conf['base_url']}" . $video_webm . "'  type='video/webm' />";
        }
        ?>
        Din webläsare har inte stöd för att visa video med HTML5!
      </video>
      <div id="timelineDiv" style="border: 3px solid black; width: 100%; position: relative; display: block; margin-right: 0px; margin-left: 0px; margin-top: -3px;">
        <canvas id="timeline" style="z-index: 98; position: absolute; top: 0px; left: 0px;" >
        </canvas>
        <canvas id="timer" style="z-index: 99; position: absolute; top: 0px; left: 0px;">
        </canvas>
      </div><!-- slut på timelinediv -->
      <button type="button" id="play" value="paused" style="width: 200px; margin-top: 15px;">Play</button>

    </div>
    </div>

  </body>
</html>
